<template>
	<view class="content">
		<image class="_bg" src="../../static/img/bg3.png" mode="aspectFill"></image>
		<view class="_label_top">
			<image class="_btn_top" src="../../static/img/kjg.png"></image>
			<label class="_lab_top">{{ itext }}</label>
		</view>
		<view class="_bg_middle">
			<m-pay
				@click="payOrder"
				:price="order.price_goods"
				:isPay="payStatu"
				:content="goods_title"
				:discount="order.price_total"
				:payTime="inumber"
				:percount="usercount"
			></m-pay>
		</view>
		<cmd-bottom-nav @click="tapNav" border-color="#BC1BBE" background-color="#BC1BBE" font-color="#fff" active-font-color="#fff" current="2"></cmd-bottom-nav>
	</view>
</template>

<script>
import cmdBottomNav from '@/components/cmd-bottom-nav/cmd-bottom-nav.vue';
import mbtn from '@/components/m-btn-type/m-btn.vue';
import mtabbar from '@/components/m-tabbar/m-tabbar.vue';
import mBtnCs from '@/components/m-btn/m-btn-cs.vue';
import mPay from '@/components/m-pay/m-pay.vue';
import comm from '../../common/helpers.js';
import util from '../../static/js/util.js';
export default {
	components: { mbtn, mtabbar, cmdBottomNav, mBtnCs, mPay },
	data() {
		return {
			itext: '订单确定',
			order: [],
			inumber: '',
			timer: '',
			payTime: '',
			oid: '',
			payStatu: true,
			//支付相关参数
			param: [],
			goods_title: '',
			discount: 0.0,
			usercount: 0,
			rudata: []
		};
	},
	onLoad(e) {
		 uni.setStorageSync('m23lock',0)
		 uni.setStorageSync('m32lock',0)
		 uni.setStorageSync('m33lock',0)
		// console.log(e);
		this.rudata = e;
		//获取订单
		uni.request({
			url: comm.websiteUrl + '?s=v1/getorder/',
			method: 'POST',
			data: {
				mid: e.mid,
				order_no: e.order_no
				// 'mid':'oIBL25Qkcode2VLSacX__5ck1OnQ',
				// 'order_no':'659553650008',
			},
			success: res => {
				// console.log(res)
				if (res.data.code == 404) {
					this.order = res.data.data;
					uni.showModal({
						title: this.goods_title,
						content: res.data.msg
					});
				}
				if (res.data.code == 200) {
					this.payStatu = res.data.data.pay_state == 0 ? true : false;
					this.goods_title = uni.getStorageSync('rule');
					this.order = res.data.data;
					this.param = res.data.param;
				}
			},
			fail: () => {},
			complete: () => {
				this.countDown();
			}
		});
		this.getcountuser();
	},
	methods: {
		tapNav(e) {
			let that = this;
			let path = e.item.pagePath;
			uni.switchTab({
				url: path,
				success: res => {},
				complete: com => {}
			});
		},
		countDown() {
			var that = this;
			//2016-12-27 12:47:08 转换日期格式
			var a = that.order.order_time.split(/[^0-9]/);
			//截止日期：日期转毫秒
			var expireMs = new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
			//倒计时毫秒
			var duringMs = expireMs.getTime() - new Date().getTime();
			// 渲染倒计时时钟
			that.inumber = that.date_format(duringMs);
			if (duringMs <= 0) {
				that.payStatu = false;
				that.inumber = '支付已截止，请重新下单';
				console.log(that.inumber);
				return;
			}
			setTimeout(function() {
				// 放在最后--
				duringMs -= 10;
				that.countDown();
			}, 10);
		},
		/* 格式化倒计时 */
		date_format(micro_second) {
			var that = this;
			// 秒数
			var second = Math.floor(micro_second / 1000);
			// 小时位
			var hr = Math.floor(second / 3600);
			// 分钟位
			var min = that.fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
			// 秒位
			var sec = that.fill_zero_prefix(second % 60); // equal to => var sec = second % 60;
			return hr + ':' + min + ':' + sec + ' ';
		},
		/* 分秒位数补0 */
		fill_zero_prefix(num) {
			return num < 10 ? '0' + num : num;
		},
		payOrder() {
			// console.log(this.rudata)
			/*
			 * 进行订单结算，调用微信支付,支付前先进行签名
			 * 时间：2019年6月3日
			 * penglei
			 * */
			uni.requestPayment({
				provider: 'provider',
				timeStamp: this.param.timeStamp,
				nonceStr: this.param.nonceStr,
				package: this.param.package,
				signType: 'MD5',
				paySign: this.param.paySign,
				success: res => {
					// console.log(res.errMsg)
					if (res.errMsg == 'requestPayment:ok') {
						// 	//成功后更改订单状态，获取通知回调
						uni.request({
							url: comm.websiteUrl + '?s=v1/wxpay/',
							method: 'GET',
							data: {},
							success: res => {
								console.log(res);
							},
							fail: () => {},
							complete: () => {}
						});
						uni.setStorageSync('m32lock', 1);
						uni.setStorageSync('m33lock', 1);
						uni.setStorageSync('m23lock', 1);
						// console.log(this.rudata)
						//组装条件
						let data = {
							group: uni.getStorageSync('3'),
							mid: this.rudata.mid,
							key: 'r3_model1_pay',
							r:'r3'
						};
						util.getRequest(comm.websiteUrl + '?s=v1/updatestatu/', 'POST', data);
						//组装条件
						data = {
							group:uni.getStorageSync('3'),
							mid: this.rudata.mid,
							key: 'r3_model2_pay',
							r:'r3'
						};
						util.getRequest(comm.websiteUrl + '?s=v1/updatestatu/', 'POST', data);
						//组装条件
						data = {
							group: uni.getStorageSync('2'),
							mid: this.rudata.mid,
							key: 'r2_model2_pay',
							r:'r2'
						};
						util.getRequest(comm.websiteUrl + '?s=v1/updatestatu/', 'POST', data);
					}
					// 更新支付状态
					let data = {
						order_no: this.rudata.order_no,
						mid: this.rudata.mid,
						key: 'status'
					};
					util.getRequest(comm.websiteUrl + '?s=v1/updateorderstatu/', 'POST', data);
					uni.navigateBack({
						url: 'main_card_res'
					});
				},
				fail: err => {
					if (err.errMsg === 'requestPayment:fail cancel') {
						uni.showToast({
							image: '../../static/img/64.png',
							title: '你已经取消支付',
							duration: 2000
						});
					}
				}
			});
		},
		getcountuser: function() {
			let that = this;
			uni.request({
				url: comm.websiteUrl + '?s=v1/getcountuser/',
				method: 'GET',
				data: {},
				success: res => {
					// console.log(res);
					that.usercount = res.data.data;
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style lang="scss">
.content {
	padding: 0upx;

	._bg {
		width: 100%;
		height: 91%;
		vertical-align: top;
		top: 0;
		right: 0;
		position: absolute;
		vertical-align: middle;
	}

	._label_top {
		display: flex;
		width: 100%;
		top: 25upx;
		height: auto;
		position: relative;
		justify-content: center;

		._btn_top {
			height: 185upx;
			width: 50%;
		}

		._lab_top {
			z-index: 3;
			color: white;
			width: 30%;
			text-align: center;
			justify-content: center;
			align-items: center;
			position: absolute;
			display: flex;
			margin: auto;
			height: 100%;
		}
	}

	._bg_middle {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 7;
		margin: auto;
		justify-content: center;
		vertical-align: middle;
		align-items: center;
		display: flex;
	}
}
</style>
